<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- 导航 -->
    <Nav :scrolltop="scrolltop"></Nav>
    <!-- 主体 -->
    <Main></Main>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 返回顶部按钮 -->
    <div @click="backtop" class="backtop" ref="backtop">
      <span class="iconfont icon-fasong"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrolltop: false,
    }
  },
  components: {
    Header: require('./Header.vue').default,
    Nav: require('./Nav.vue').default,
    Main: require('./Main.vue').default,
    Footer: require('./Footer.vue').default,
  },
  mounted() {
    window.onscroll = () => {
      if (document.documentElement.scrollTop > 130) {
        this.scrolltop = true
        this.$refs.backtop.style.display = 'block'
      } else {
        this.scrolltop = false
        this.$refs.backtop.style.display = 'none'
      }
    }
  },
  methods: {
    backtop() {
      let time = setInterval(() => {
        document.documentElement.scrollTop -= 50
        if (document.documentElement.scrollTop === 0) {
          clearInterval(time)
        }
      }, 10)
    },
  },
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
.backtop {
  width: 40px;
  height: 40px;
  color: #fff;
  background: #29f0b4;
  text-align: center;
  line-height: 40px;
  position: fixed;
  bottom: 20px;
  z-index: 100;
  right: 20px;
  display: none;
}
</style>
